<template>
  <div class="space-tower container" :class="className" @click="start">
    <div class="game-control">
      <g-timer />
      <g-help :content="ins" name="space_tower" />
    </div>
    <div class="game">
      <canvas id="webgl" type="webgl" style="width:100vw;height:100vh;" />
    </div>
    <cover-view class="score">{{ score }}</cover-view>
    <div class="instructions" :class="instructionClass">单击放置砖块</div>
    <div class="game-over">
      <h2>Game Over</h2>
      <p>你做的很好啦,你是最棒的</p>
      <p>单击重新开始</p>
    </div>
    <div class="game-ready">
      <div class="start-button" @click="startGame">开始</div>
      <div />
    </div>
  </div>
</template>

<script>
import { Game, setThree } from './game'
import Taro from '@tarojs/taro'
import { mapGetters } from 'vuex'
import GHelp from '@/components/GHelp.vue'
import GTimer from '@/components/GTimer.vue'
// @ts-ignore
import { createScopedThreejs } from './three.js'

export default {
  components: {
    GHelp,
    GTimer
  },
  data() {
    return {
      game: null,
      instructionClass: '',
      className: '',
      score: null,
      show: false,
      playing: false,
      ins: '当砖块重叠时, 点击屏幕任意位置进行放置. 若放置砖块没有重叠则游戏结束'
    }
  },
  computed: mapGetters(['system']),
  onReady() {
    this.addListeners()
    setTimeout(() => {
      Taro.createSelectorQuery()
        .select('#webgl')
        .node()
        .exec((res) => {
          console.log('canvas', res)
          const canvas = res[0].node
          this.canvas = canvas
          const THREE = createScopedThreejs(canvas)
          setThree(THREE, this)
          this.game = new Game()
          setTimeout(() => {
            this.show = true
          }, 2000)
        })
    }, 500)
  },
  methods: {
    startGame(e) {
      e.stopPropagation()
      this.playing = true
      this.start()
    },
    start() {
      if (!this.playing) {
        return
      }
      this.game && this.game.onAction()
    },
    addListeners() {
      this.$on('setScore', (num) => {
        this.score = num
      })

      this.$on('setContainer', (name) => {
        this.className = name
      })

      this.$on('setInstruction', (hide) => {
        this.instructionClass = hide
      })
    }
  }
}
</script>

<style lang="less">
.space-tower {
  position: relative;
  height: 100vh;
  background-color: #D0CBC7;

  .game-control {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    box-sizing: border-box;
  }
}

.container .score {
  position: absolute;
  top: 60px;
  width: 100%;
  text-align: center;
  font-size: 10vh;
  transition: transform 0.5s ease;
  color: #333344;
  transform: translatey(-200px) scale(1);
}
.container .game-over {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.container .game-over {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
  transform: translatey(-50px);
  color: #333344;
}
.container .game-over h2 {
  margin: 0;
  padding: 0;
  font-size: 60px;
}
.container .game-ready {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.container .game-ready .start-button {
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
  transform: translatey(-50px);
  border: 4px solid #333344;
  padding: 10px 20px;
  background-color: transparent;
  color: #333344;
  font-size: 60px;
}
.container .instructions {
  position: absolute;
  width: 100%;
  top: 16vh;
  left: 0;
  text-align: center;
  transition: opacity 0.5s ease, transform 0.5s ease;
  opacity: 0;
}
.container .instructions.hide {
  opacity: 0 !important;
}
.container.playing .score,
.container.resetting .score {
  transform: translatey(0px) scale(1);
}
.container.playing .instructions {
  opacity: 1;
}
.container.ready .game-ready .start-button {
  opacity: 1;
  transform: translatey(0);
}
.container.ended .score {
  transform: translatey(6vh) scale(1.5);
}
.container.ended .game-over {
  opacity: 1;
  transform: translatey(0);
}
.container.ended .game-over p {
  transition-delay: 0.3s;
}
</style>
